<template>
	<view>
		<view class="filterbar" :style="{ top: CustomBar + 'px' }">
			<view class=" flex nav">
				<span class=" flex align-center justify-center" @tap="filterOrder(1)">
					<filter-icon :sort="sales"></filter-icon>
					<text class="ml10">销量</text>
				</span>
				<span class=" flex align-center justify-center" @tap="filterOrder(2)">
					<filter-icon :sort="price"></filter-icon>
					<text class="ml10">价格</text>
				</span>
				<span class=" filter flex align-center justify-center" @tap="openModal('modal')">
					<image src="/static/filter/color.png" mode="widthFix"></image>
					<text class="ml10">{{ curColorName || '颜色' }}</text>
				</span>
			</view>
			<!-- 筛选 条件 -->
			<zx-modal ref="modal">
				<view @tap.stop class="flex flex-wrap colorlist">
					<view class="itemColor" :class="{ active: item.id == color }" v-for="(item, index) in colorList" :key="index" @tap="changeColor(item)">{{ item.name }}</view>
				</view>
			</zx-modal>
		</view>
		<view :style="'height:' + navHeight + 'px' + ';'"></view>
	</view>
</template>

<script>
import filterIcon from '@/components/filter-icon.vue';
import zxModal from '@/components/zx-modal/zx-modal';
import { mapState } from 'vuex';
export default {
	name: 'filterbar',
	data() {
		return {
			navHeight: 50,
			sales: '',
			price: '',
			color: '',
			colorList: [],
			curColorName: ''
		};
	},
	components: { filterIcon, zxModal },
	computed: {
		...mapState(['CustomBar'])
	},
	mounted() {
		this.setDom();
		this.getColorList();
	},
	methods: {
		domData: function(t, n) {
			var o = this;
			this.$nextTick(function() {
				uni.createSelectorQuery()
					.in(o)
					.selectAll(t)
					.boundingClientRect()
					.exec(function(e) {
						n(e[0]);
					});
			});
		},
		setDom: function() {
			var t = this;
			this.domData('.nav', function(e) {
				console.log('e', e);
				t.$refs.modal.navTop = e[0].bottom;
				t.navHeight = e[0].height;
			});
		},
		filterOrder(type) {
			switch (type) {
				case 1: {
					if (this.sales == 'desc') {
						this.sales = 'asc';
					} else if (this.sales == 'asc') {
						this.sales = '';
					} else {
						this.sales = 'desc';
					}
					this.price = '';
					this.color = '';
					break;
				}
				case 2: {
					if (this.price == 'desc') {
						this.price = 'asc';
					} else if (this.price == 'asc') {
						this.price = '';
					} else {
						this.price = 'desc';
					}
					this.sales = '';
					this.color = '';
					break;
				}
			}
			let { price, sales, color } = this;
			this.$emit('changeFilrer', {
				price,
				sales,
				color
			});
		},
		openModal: function(t) {
			this.modalName !== t ? (this.$refs.modal.isShow = !0) : (this.$refs.modal.isShow = !this.$refs.modal.isShow), (this.modalName = t);
		},
		getColorList() {
			this.$postAction(this.$api.getColorList).then(da => {
				if (da.code == 0) {
					this.colorList = da.data;
				}
			});
		},
		changeColor(item) {
			if (item.id == this.color) {
				this.color = '';
				this.curColorName = '';
			} else {
				this.color = item.id;
				this.curColorName = item.name;
			}
			this.price = '';
			this.sales = '';
			let { price, sales, color } = this;
			this.$emit('changeFilrer', {
				price,
				sales,
				color
			});
			this.$refs.modal.isShow = !1;
		}
	}
};
</script>

<style scoped lang="scss">
.filterbar {
	position: fixed;
	background-color: #fff;
	z-index: 800000;
	top: 0;
	left: 180upx;
	right: 0;
	padding: 0 20upx;
	z-index: 999;
	background: #fff;
	span {
		width: 136upx;
		height: 56upx;
		background: #f8f8f8;
		border-radius: 8upx;
		border: 1px solid #e0e0e0;
		color: #1c1c1e;
		font-size: 26upx;
		& + span {
			margin-left: 28upx;
		}
		&.active {
			color: #fe5608;
		}
	}
	image {
		width: 28upx;
		height: 28upx;
		margin-left: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.filter {
		image {
			width: 26upx;
		}
	}
}
.colorlist {
	padding: 20upx 22upx;
}
.itemColor {
	padding: 0 27upx;
	height: 56upx;
	font-size: 26upx;
	color: #323232;
	line-height: 54upx;
	border-radius: 8upx;
	border: 1px solid #d6d6d6;
	margin: 8upx 6upx;
	&.active {
		background: var(--nav-bg);
		color: #fff;
		border-color: var(--nav-bg);
	}
}
</style>
